<template>
  <div class="classification-dictionary">
    <a-row :gutter="10">
      <a-col :xl="24" :lg="24" :md="24">
        <a-card>
          <div class="table-page-search-wrapper">
            <a-form-model
              ref="formCodition"
              :label-col="{ span: 4, style: 'width:80px;' }"
              :wrapper-col="{ span: 14, style: 'width:calc(100%-80px)' }"
              layout="inline"
              :model="formCodition"
            >
              <a-row :gutter="48">
                <a-col :xl="8" :lg="12" :md="24">
                  <a-form-model-item label="适用单位" prop="deptId">
                    <a-select
                      show-search
                      optionFilterProp="children"
                      v-model="formCodition.deptId"
                      mode="multiple"
                      placeholder="请选择适用单位"
                      style="width: 100%"
                      allowClear
                    >
                      <a-select-option v-for="(item, index) in unitList" :key="index" :value="item.dept_id">
                        {{ item.dept_name }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :xl="8" :lg="12" :md="24">
                  <a-form-model-item label="类型" prop="processType">
                    <a-select
                      show-search
                      optionFilterProp="children"
                      v-model="formCodition.processType"
                      placeholder="请选择类型"
                      style="width: 100%"
                      allowClear
                    >
                      <a-select-option :value="1"> 市场信息 </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :xl="8" :lg="12" :md="24">
                  <a-form-model-item label="创建日期" prop="createTimeList">
                    <a-range-picker
                      v-model="formCodition.createTimeList"
                      valueFormat="YYYY-MM-DD"
                      style="width: 100%"
                      allowClear
                    />
                  </a-form-model-item>
                </a-col>

                <a-col :xl="24" :lg="24" :md="24" class="topBtn">
                  <a-form-model-item>
                    <span>
                      <a-button type="primary" @click="allEvents('search')">查询</a-button>
                      <a-button style="margin-left: 8px" @click="allEvents('reset')">重置</a-button>
                      <a-button style="margin-left: 8px" type="primary" icon="plus" @click="allEvents('add')"
                        >新增
                      </a-button>
                    </span>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </div>
          <s-table
            ref="table"
            :columns="tables.columns"
            :data="tables.loadData"
            :scroll="{ x: '10000', y: 'calc(100vh - 314px)' }"
          >
            <span slot="action" slot-scope="text, record">
              <template>
                <a class="other" @click="allEvents('duplicate', record)">复制</a>
                <a-divider type="vertical" />
                <a class="edit" @click="allEvents('edit', record)">编辑</a>
                <a-divider type="vertical" />
                <a class="delete" @click="allEvents('delete', record)">删除</a>
              </template>
            </span>
          </s-table>
        </a-card>
      </a-col>
    </a-row>
    <a-modal
      title="流程配置"
      width="50%"
      :maskClosable="false"
      okText="保存"
      cancelText="取消"
      :visible="dialog.show"
      @ok="allEvents('sure')"
      @cancel="allEvents('cancel')"
    >
      <a-form-model
        ref="form"
        :rules="dialog.rules"
        :model="dialog.form"
        :label-col="{ span: 4, style: 'width:110px;' }"
        :wrapper-col="{ span: 14, style: 'width:calc(100% - 110px)' }"
      >
        <a-row :gutter="10">
          <a-col :xl="24" :lg="24" :md="24">
            <a-form-model-item label="适用单位" prop="deptIds">
              <a-select
                show-search
                optionFilterProp="children"
                v-model="dialog.form.deptIds"
                mode="multiple"
                placeholder="请选择适用单位"
                style="width: 100%"
                allowClear
              >
                <a-select-option v-for="(item, index) in unitList" :key="index" :value="item.dept_id">
                  {{ item.dept_name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :xl="24" :lg="24" :md="24">
            <a-form-model-item label="类型" prop="processType">
              <a-select
                show-search
                optionFilterProp="children"
                v-model="dialog.form.processType"
                placeholder="请选择类型"
                style="width: 100%"
                allowClear
              >
                <a-select-option value="1"> 市场信息 </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :xl="24" :lg="24" :md="24">
            <a-form-model-item label="流程说明" prop="remarks">
              <a-textarea
                v-model="dialog.form.remarks"
                placeholder="请输入流程说明"
                :maxLength="500"
                type="textarea"
                allowClear
              />
            </a-form-model-item>
          </a-col>
          <a-col :xl="24" :lg="24" :md="24">
            <div class="dialog-subtitle">
              <div class="subtitle">节点信息</div>
            </div>
          </a-col>
          <a-col :xl="24" :lg="24" :md="24" class="topBtn">
            <a-form-model-item>
              <span>
                <a-button style="margin-left: 8px" type="primary" icon="plus" @click="allEvents('addConfig')"
                  >新增
                </a-button>
              </span>
            </a-form-model-item>
          </a-col>
          <a-col :xl="24" :lg="24" :md="24">
            <a-table
              bordered
              :data-source="dialog.form.pointList"
              :columns="dialogConfig.columns"
              :rowKey="
                (record, index) => {
                  return index
                }
              "
              tableLayout="fixed"
              :pagination="false"
              class="score"
            >
              <span slot="action" slot-scope="text, record, index">
                <template>
                  <a class="edit" @click="allEvents('editConfig', record, index)">编辑</a>
                  <a-divider type="vertical" />
                  <a class="delete" @click="allEvents('deleteConfig', record, index)">删除</a>
                </template>
              </span>
            </a-table>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
    <a-modal
      title="节点"
      width="50%"
      :maskClosable="false"
      okText="保存"
      cancelText="取消"
      :visible="dialogConfig.show"
      @ok="allEvents('sureConfig')"
      @cancel="allEvents('cancelConfig')"
    >
      <a-row :gutter="10">
        <a-form-model
          ref="formConfig"
          :rules="dialogConfig.rules"
          :model="dialogConfig.form"
          :label-col="{ span: 4, style: 'width:110px;' }"
          :wrapper-col="{ span: 14, style: 'width:calc(100% - 110px)' }"
        >
          <a-col :xl="24" :lg="24" :md="24">
            <a-form-model-item label="节点名称" prop="pointName">
              <a-input v-model="dialogConfig.form.pointName" placeholder="请输入节点名称" :maxLength="50" allowClear />
            </a-form-model-item>
          </a-col>
          <a-col :xl="24" :lg="24" :md="24">
            <div style="color: red; margin-left: 30px">* 会签:该节点需所有人审批通过才可以通过</div>
            <div style="color: red; margin-left: 30px">* 审批:该节点仅需一个人审批通过就可以通过</div>
          </a-col>
          <a-col :xl="24" :lg="24" :md="24">
            <a-form-model-item label="节点类型" prop="pointType">
              <a-select
                show-search
                optionFilterProp="children"
                v-model="dialogConfig.form.pointType"
                placeholder="请选择节点类型"
                style="width: 100%"
                allowClear
              >
                <a-select-option :value="1"> 审批 </a-select-option>
                <a-select-option :value="2"> 会签 </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :xl="24" :lg="24" :md="24">
            <a-form-model-item label="审核人" prop="personIds">
              <a-select
                show-search
                optionFilterProp="children"
                v-model="dialogConfig.form.personIds"
                mode="multiple"
                placeholder="请选择审核人"
                style="width: 100%"
                @change="personChange"
                allowClear
              >
                <a-select-option v-for="(item, index) in personList" :key="index" :value="item.personId">
                  {{ item.personName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :xl="24" :lg="24" :md="24">
            <a-form-model-item label="排序" prop="pointNo">
              <a-input-number
                :min="1"
                :step="1"
                :max="200"
                :precision="0"
                style="width: 100%"
                v-model="dialogConfig.form.pointNo"
                placeholder="请输入排序"
              />
            </a-form-model-item>
          </a-col>
          <a-col :xl="24" :lg="24" :md="24">
            <a-form-model-item label="审批节点说明" prop="pointDesc">
              <a-input
                v-model="dialogConfig.form.pointDesc"
                placeholder="请输入审批节点说明"
                :maxLength="255"
                allowClear
              />
            </a-form-model-item>
          </a-col>
        </a-form-model>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import {
  processList,
  processAdd,
  processEdit,
  processDelete,
  processDetails,
} from '@/api/marketManagement/marketApprovalProcessConfiguration'
  import {
    deptList,
  } from '@/api/maintenance/planningAndBudgeting/preparation'
import { personnelListAll } from '@/api/system/personnel'
export default {
  name: 'marketApprovalProcessConfiguration',
  components: {},
  data() {
    return {
      unitList: [],
      personList: [],
      formCodition: {
        deptId: [],
        processType: undefined,
        createTimeList: [],
      },
      tables: {
        columns: [
          {
            title: '序号',
            ellipsis: true,
            width: 61,
            customRender: (text, record, index) => `${index + 1}`,
          },

          {
            title: '适用单位',
            dataIndex: 'depts',
            width: 320,
            ellipsis: true,
          },
          {
            title: '类型',
            dataIndex: 'processType',
            width: 150,
            ellipsis: true,
            customRender: (text, record, index) => {
              if (text == 1) return '市场信息'
            },
          },
          {
            title: '流程说明',
            dataIndex: 'remarks',
            width: 387,
            ellipsis: true,
          },
          {
            title: '创建日期',
            dataIndex: 'createTime',
            ellipsis: true,
            width: 150,
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: 200,
            scopedSlots: {
              customRender: 'action',
            },
          },
        ],
        loadData: (parameter) => {
          const params = Object.assign({}, parameter, this.formCodition)
          return processList(params).then((res) => {
            return res
          })
        },
      },

      dialog: {
        show: false,
        form: {
          processId: '',
          processType: undefined,
          deptIds: [],
          remarks: undefined,
          pointList: [],
        },
        rules: {
          deptIds: [
            {
              required: true,
              message: '请选择适用单位',
              trigger: 'change',
            },
          ],
          processType: [
            {
              required: true,
              message: '请选择类型',
              trigger: 'change',
            },
          ],
          remarks: [
            {
              required: true,
              message: '请输入流程说明',
              trigger: 'blur',
            },
          ],
        },
      },
      dialogConfig: {
        show: false,
        columns: [
          {
            title: '序号',
            align: 'center',
            width: 40,
            customRender: (text, record, index) => `${index + 1}`,
          },
          {
            title: '节点名称',
            dataIndex: 'pointName',
            align: 'center',
            width: 100,
          },
          {
            title: '节点类型',
            dataIndex: 'pointType',
            align: 'center',
            width: 100,
            customRender: (text, record, index) => {
              if (text == 1) return '审批'
              else if (text == 2) return '会签'
            },
          },
          {
            title: '审核人',
            dataIndex: 'personNames',
            align: 'center',
            width: 200,
          },
          {
            title: '排序',
            dataIndex: 'pointNo',
            align: 'center',
            width: 61,
          },
          {
            title: '审批节点说明',
            dataIndex: 'pointDesc',
            align: 'center',
            width: 120,
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: 120,
            align: 'center',
            scopedSlots: {
              customRender: 'action',
            },
          },
        ],
        form: {
          pointNo: undefined, //排序
          pointName: undefined,
          personIds: [],
          personNames: undefined,
          pointType: 1,
          pointNo: undefined,
          pointDescL: undefined,
        },
        rules: {
          pointName: [
            {
              required: true,
              message: '请输入节点名称',
              trigger: 'blur',
            },
          ],
          pointType: [
            {
              required: true,
              message: '请选择节点类型',
              trigger: 'change',
            },
          ],
          personIds: [
            {
              required: true,
              message: '请选择审核人',
              trigger: 'change',
            },
          ],
        },
      },
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    personChange(ids, nodes) {
      var textArr = []
      nodes.forEach((item) => {
        textArr.push(item.componentOptions.children[0].text)
      })
      this.dialogConfig.form.personNames = textArr.join('、')
    },
    allEvents(type, param, param1) {
      switch (type) {
        case 'search':
          this.$refs.table.refresh(true)
          break
        case 'reset':
          this.$refs.formCodition.resetFields()
          this.$refs.table.refresh(true)
          break
        case 'add':
          this.dialog.show = true
          break
        case 'edit':
          processDetails(param.processId).then((res) => {
            this.dialog.show = true
            this.$nextTick(function () {
              this.dialog.form = res
            })
          })
          break
        case 'duplicate':
          processDetails(param.processId).then((res) => {
            this.dialog.show = true
            res.processId = ''
            this.$nextTick(function () {
              this.dialog.form = res
            })
          })
          break
        case 'delete':
          var that = this
          this.$confirm({
            title: '确定要删除该数据吗?',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
              processDelete(param.processId).then((res) => {
                that.$message.success('删除成功')
                that.$refs.table.refresh(true)
              })
            },
            onCancel() {},
          })
          break
        case 'sure':
          this.$refs.form.validate((valid) => {
            if (valid) {
              if (this.dialog.form.pointList.length == 0) {
                return this.$message.warning('节点信息不能为空！')
              }
              if (this.dialog.form.processId) {
                processEdit(this.dialog.form)
                  .then((res) => {
                    this.$message.success('修改成功')
                    this.$refs.table.refresh()
                    this.allEvents('cancel')
                  })
                  .catch((err) => {})
              } else {
                processAdd(this.dialog.form)
                  .then((res) => {
                    this.$message.success('添加成功')
                    this.$refs.table.refresh(true)
                    this.allEvents('cancel')
                  })
                  .catch((err) => {})
              }
            }
          })
          break
        case 'cancel':
          this.dialog.form.processId = ''
          this.dialog.form.pointList = []
          this.dialogConfig.form.personNames = undefined
          this.dialog.show = false
          this.$refs.form.resetFields()
          break
        case 'addConfig':
          this.dialogConfig.show = true
          break
        case 'cancelConfig':
          this.dialogConfig.show = false
          this.dialogConfig.form.index = undefined
          // this.dialogConfig.form.personNames = undefined
          this.dialogConfig.form = {
            pointNo: undefined, //排序
            pointName: undefined,
            personIds: [],
            personNames: undefined,
            pointType: 1,
            pointNo: undefined,
            index: undefined,
            pointDesc: undefined,
          }
          this.$refs.formConfig.resetFields()
          break

        case 'editConfig':
          this.dialogConfig.show = true
          this.dialogConfig.form = JSON.parse(JSON.stringify(param))
          this.dialogConfig.form.index = param1
          break
        case 'deleteConfig':
          this.dialog.form.pointList.splice(param1, 1)
          break
        case 'sureConfig':
          this.$refs.formConfig.validate((valid) => {
            if (valid) {
              const obj = JSON.parse(JSON.stringify(this.dialogConfig.form))
              if (this.dialogConfig.form.index || this.dialogConfig.form.index == 0) {
                this.dialog.form.pointList.splice(this.dialogConfig.form.index, 1, obj)
                this.sortTable(this.dialog.form.pointList)
                this.$message.success('修改成功')
                this.allEvents('cancelConfig')
              } else {
                this.dialog.form.pointList.push(obj)
                this.sortTable(this.dialog.form.pointList)
                this.$message.success('添加成功')
                this.allEvents('cancelConfig')
              }
            }
          })
          break
      }
    },
    //表格排序
    sortTable(arr) {
      arr.sort((a, b) => {
        if (a.pointNo != b.pointNo) {
          if (a.pointNo && b.pointNo) {
            return a.pointNo > b.pointNo ? 1 : -1
          } else if (!a.pointNo && b.pointNo) {
            return -1
          } else if (!b.pointNo && a.pointNo) {
            return 1
          }
        }
        if (!b.pointNo && !a.pointNo) {
          return -1
        }
      })
    },
    init() {
      deptList().then((res) => {
        this.unitList = res || []
      })
      //查询人员
      personnelListAll({}).then((res) => {
        this.personList = res || []
      })
    },
  },
}
</script>

<style lang="less" scoped>
</style>